<template xmlns="http://www.w3.org/1999/html">
  <div style="padding: 20px">
    <el-card class="box-card">
    <el-row :gutter="20">
      <el-col :span="20" :offset="2">
        <div class="grid-content bg-purple-light">
          <tr><b>&nbsp;</b></tr>
          <b>教育部全国高校名单（截止2020-06-30)</b>
          <div  style="float: right">
            <el-button round size="small" @click="seleteChange('1')">按高校查询</el-button>
            <el-button round size="small" @click="seleteChange('2')">按地区查询</el-button>
          </div>
        </div>
      </el-col>
    <el-col :span="4" :offset="2">
      <el-menu
        v-if="this.seleteType==='2'"
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose">
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-plus"></i>
            <span>高校类型</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="1" @click="typeChange">一流大学</el-menu-item>
            <el-menu-item index="2" @click="typeChange">一流学科</el-menu-item>
            <el-menu-item index="3" @click="typeChange">985高校</el-menu-item>
            <el-menu-item index="4" @click="typeChange">211高校</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-plus"></i>
            <span>所在地区</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-1" @click="cityChange">北京市</el-menu-item>
            <el-menu-item index="1-2" @click="cityChange">四川省</el-menu-item>
            <el-menu-item index="1-3" @click="cityChange">天津市</el-menu-item>
            <el-menu-item index="1-4" @click="cityChange">河北省</el-menu-item>
            <el-menu-item index="1-5" @click="cityChange">山西省</el-menu-item>
            <el-menu-item index="1-6" @click="cityChange">内蒙古自治区</el-menu-item>
            <el-menu-item index="1-7" @click="cityChange">辽宁省</el-menu-item>
            <el-menu-item index="1-8" @click="cityChange">吉林省</el-menu-item>
            <el-menu-item index="1-9" @click="cityChange">黑龙江省</el-menu-item>
            <el-menu-item index="1-10" @click="cityChange">上海市</el-menu-item>
            <el-menu-item index="1-11" @click="cityChange">江苏省</el-menu-item>
            <el-menu-item index="1-12" @click="cityChange">浙江省</el-menu-item>
            <el-menu-item index="1-13" @click="cityChange">安徽省</el-menu-item>
            <el-menu-item index="1-14" @click="cityChange">福建省</el-menu-item>
            <el-menu-item index="1-15" @click="cityChange">江西省</el-menu-item>
            <el-menu-item index="1-16" @click="cityChange">山东省</el-menu-item>
            <el-menu-item index="1-17" @click="cityChange">河南省</el-menu-item>
            <el-menu-item index="1-18" @click="cityChange">湖北省</el-menu-item>
            <el-menu-item index="1-19" @click="cityChange">湖南省</el-menu-item>
            <el-menu-item index="1-20" @click="cityChange">广东省</el-menu-item>
            <el-menu-item index="1-21" @click="cityChange">广西壮族自治区</el-menu-item>
            <el-menu-item index="1-22" @click="cityChange">海南省</el-menu-item>
            <el-menu-item index="1-23" @click="cityChange">重庆市</el-menu-item>
            <el-menu-item index="1-24" @click="cityChange">贵州省</el-menu-item>
            <el-menu-item index="1-25" @click="cityChange">云南省</el-menu-item>
            <el-menu-item index="1-26" @click="cityChange">西藏自治区</el-menu-item>
            <el-menu-item index="1-27" @click="cityChange">陕西省</el-menu-item>
            <el-menu-item index="1-28" @click="cityChange">甘肃省</el-menu-item>
            <el-menu-item index="1-29" @click="cityChange">青海省</el-menu-item>
            <el-menu-item index="1-30" @click="cityChange">宁夏回族自治区</el-menu-item>
            <el-menu-item index="1-31" @click="cityChange">新疆维吾尔族自治区</el-menu-item>

          </el-menu-item-group>
          <el-menu-item-group>
          </el-menu-item-group>

        </el-submenu>
      </el-menu>
      <el-card v-if="this.seleteType==='1'">
        <el-row :gutter="20">
          <el-col :span="16">
            <el-input v-model="input" placeholder="请输入关键字"></el-input>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" @click="seleteByName">查询</el-button>
          </el-col>
        </el-row>
      </el-card>
    </el-col>
      <el-col :span="16" >
      <el-table
        :data="tableData"
        :border="true"
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        style="width: 100%">
        <el-table-column label="序号" width="60">
          <template slot-scope="scope">{{scope.$index+1+(pageNum-1)*pageSize}}</template>
        </el-table-column>
        <el-table-column prop="schoolCode" label="学校标识码" width="200">
        </el-table-column>
        <el-table-column prop="schoolName" label="学校名称" width="250">
        </el-table-column>
        <el-table-column prop="location" label="所在地区" width="130">
        </el-table-column>
        <el-table-column prop="city" label="所在城市" width="130">
        </el-table-column>
        <el-table-column prop="competent" label="主管部门" width="150">
        </el-table-column>
        <el-table-column prop="arrangement" label="办学层次" width="100">
        </el-table-column>
        <el-table-column prop="type" label="高校类型" width="200">
        </el-table-column>
      </el-table>
        <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
      <el-pagination
        small
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[50, 100, 150, 200]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
      </el-col>
    </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'getData',
  mounted () { // 生命周期
    this.getTable()
  },
  watch: {
    seleteType (val) {
      if (val) { this.getTable() }
    }
  },
  methods: {
    typeChange (type) {
      this.data.schoolName = ''
      this.data.type = type.index
      this.getTable()
    },
    cityChange (city) {
      this.data.schoolName = ''
      this.data.type = ''
      this.data.location = city.index
      this.getTable()
    },

    getTable () { // 取数据
      this.$axios({
        method: 'post',
        url: 'http://localhost:8080/liuziqiang/school/getData',
        data: this.data
      }).then(res => { // 数据返回操作 // 绑定后端数据
        this.tableData = res.data.result.slice(
          (this.pageNum - 1) * this.pageSize,
          this.pageNum * this.pageSize
        )
        this.total = res.data.result.length
      })
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.getTable()
      this.$scrollTo()
    },
    handleCurrentChange (val) {
      this.pageNum = val
      this.getTable()
      this.$scrollTo()
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    seleteChange (type) {
      this.seleteType = type
    },
    seleteByName () {
      // schoolName: this.input
      this.data.schoolName = this.input
      this.data.type = ''
      this.data.location = ''
      debugger
      this.getTable()
    }
  },
  data () {
    return {
      tableData: [],
      pageNum: 1,
      pageSize: 50,
      total: 50,
      seleteType: '1',
      input: '',
      data: {
        schoolName: '',
        type: '',
        location: ''
      }
    }
  }
}
</script>

<style>
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 12px;
  min-height: 70px;
  text-align: left;
  background-color: paleturquoise;

}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
